import React, { Component } from 'react'
import style from './Manage.module.css'
export default class Manage extends Component {
    state = {
        x: 0,
        y: 0,
        top: 0,
        left: 0,
        a: {},
    }
    componentDidMount() {
    }
    start = (e) => {
        // console.log('start', e)
        const { clientX, clientY } = e;
        this.setState({
            x: clientX,
            y: clientY
        })
    }
    move = (e) => {
        // console.log('move', e)

    }
    end = (e) => {
        console.log('end', e)
        const { clientX, clientY } = e
        const top = clientX - this.state.x
        const left = clientY - this.state.y

        console.log(top, left)
        this.setState({
            top: clientX,
            left: clientY
        })
    }
    add = () => {
        this.setState({
            a: {
                b: 2
            }
        })
    }
    render() {
        return (
            <div className={style.content}>
                {this.state.a.b}
                <button onClick={this.add}>click</button>
                <div>212</div>
                <div>212</div>
                <div>212</div>
                <div>212</div>
                <div>212</div>
                <div>212</div>
                {/* <div
                    style={{ left: this.state.left, top: this.state.top }}
                    className={style.block}
                    draggable="true"
                    onDragStart={this.start}
                    onDrag={this.move}
                    onDragEnd={this.end}
                >

                    2121Manage
                </div> */}
            </div>
        )
    }
}
